<template>
  <div>
    <div class="tags">
      <!-- tags标签页 -->
      <el-tag class="eltagbtn" :key="tag.name" v-for="(tag, index) in tags" :closable="tag.name !== 'homeview'"
        :disable-transitions="false" size="large" @close="handleClose(tag, index)" @click="clickMenu(tag)"
        :effect="$route.name === tag.name ? 'dark' : 'plain'">{{
          tag.title }}</el-tag>
    </div>
  </div>
</template>

<script setup lang="ts">
import { tagstore } from "@/store/modules/Tagview.ts";
import { storeToRefs } from 'pinia'
const router = useRouter();
const route = useRoute();
const taglist: any = tagstore();
let { tags } = storeToRefs(taglist)
watch(
  () => route.matched, // 也可以直接写 route ; 即  () => route.path  替换成 route
  () => {
    let { name, path, meta: { title } } = route.matched[route.matched.length - 1];
    let tagdata = {
      title: title,
      name: name,
      path: path
    }
    taglist.addtags(tagdata)
  },
  {
    immediate: true
  }
)

function handleClose(tag: IMenu, index: any) {
  let length = tags.value.length
  if (tag.name !== route.name) {
    taglist.closetags(tag)
    return
  }
  taglist.closetags(tag)
  if (index + 1 === length) {
    router.push({ name: tags.value[index - 1].name })
  } else {
    router.push({ name: tags.value[index].name })
  }
}
// onMounted(() => {
  // console.log("tags", tags);


// })

function clickMenu(item: IMenu) {
  router.push({ name: item.name })
}
</script>

<style lang="scss" scoped>
.tags {
 
  .eltagbtn {
    
    cursor: pointer;
    margin: 5px;
  }

  /* grid: 20px; */
}
</style>